<template>
	<v-app>
		<router-view />
	</v-app>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useStore } from '@/store';
import { UserService } from '@/services/UserService';
import { ElNotification } from 'element-plus';
import ts from 'vue-tsc/typescript/lib/tsserverlibrary';
import LogLevel = ts.server.LogLevel;
import { useRouter } from 'vue-router';
import { websocketClient } from './libs';
export default defineComponent({
	name: 'App',

	setup() {
		const store = useStore();
		const router = useRouter();
		store.dispatch('getUpgradeProfitRate');
		store.dispatch('getComfortSkin');

		onMounted(() => {
			const { token } = store.state;
			if (token) {
				getUserInfo();
				getMsg();
			}
			const searchParams = new URLSearchParams(window.location.search);
			if (searchParams.has('code')) {
				const code = searchParams.get('code');

				code != null && localStorage.setItem('inventCode', code);

				console.log(code);
			}
		});
		function getMsg() {
			UserService.messageList({
				page: 1,
				page_size: 10
			}).then((msg) => {
				if (msg.data.code == 0)
					if (msg.data.data.unread > 0) {
						ElNotification({
							title: '温馨提醒',
							message: `您有${msg.data.data.unread}未读的站内信件`,
							type: 'warning',
							duration: 10000,
							onClick: () => {
								router.push('/user/msg-record');
							}
						});
					}
			});
		}
		async function getUserInfo() {
			return store
				.dispatch('getUserInfo')
				.then((userInfo) => {
					const status = userInfo.data?.data?.status;
					if (status !== 0) {
						logout();
						return;
					}
					websocketClient.saveOnlineState(userInfo.data.data.user_id);
					store.dispatch('getUserSeed');
					store.dispatch('getInviterInfo');
					store.dispatch('getLevelSetting');
					store.dispatch('getPromoteRecord');
					store.dispatch('getPromoteStat');
				})
				.catch((response) => {
					logout();
				});
		}

		function logout() {
			UserService.logout();
			commitUserToken('');
		}

		function commitUserToken(token) {
			store.commit('setToken', token);
			window.location.reload();
		}
	}
});
</script>

<style lang="scss">
#app {
	position: relative;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	width: 100%;
}

.v-layout {
	overflow: initial !important;
}

.text-overflow-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>

<style lang="scss">
.el-pager li {
	&.active {
		background: #7668cb !important;
	}
}

.btn-prev,
.el-pager li,
.btn-next,
.el-pagination__editor input {
	background: #333 !important;
	color: #fff !important;
	border: none !important;
}

::selection {
	background-color: #b3d4fc;
	color: #000;
	text-shadow: none;
}
::-webkit-scrollbar-thumb {
	background: #494949;
	border-radius: 0.4rem;
	background: rgb(73, 73, 73, 0.5);
}
::-webkit-scrollbar {
	height: 4px;
	background: rgba(44, 44, 46, 0.5);
}

.el-loading-mask {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

.custom-message-box {
	border: none !important;
	background: #1c192a !important;

	.el-message-box__header {
		background: #28253b;
		.el-message-box__title {
			color: rgba(255, 255, 255, 0.56) !important;
		}
	}

	.el-message-box__message {
		color: rgba(255, 255, 255, 0.9) !important;
	}

	.el-message-box__btns {
		.el-button {
			background: transparent;
			border-color: #fff;
			color: #fff;
		}
	}
}
</style>

<style lang="scss">
@media screen and (max-width: 600px) {
	.custom-message-box {
		width: 90vw !important;
	}
}
</style>

<style lang="scss">
.official-flag {
	display: inline-block;
	height: 16px;
	bottom: 0;
	transform: translateY(-50%);
	background-color: #4f5175;
	color: #fff;
	border-radius: 16px;
	min-width: 36px;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}
</style>

<style lang="scss">
.battle-scrollbar {
	&::-webkit-scrollbar-thumb {
		height: 6px;
		background: #8e7eed;
	}
}
</style>

<style lang="scss">
@media screen and (min-width: 600px) {
	.battle-scrollbar {
		&:hover {
			&::-webkit-scrollbar {
				height: 10px !important;
			}
		}
	}
}
</style>
<style>
html::-webkit-scrollbar {
	width: 10px;
}

html::-webkit-scrollbar-track {
	background: rgb(179, 177, 177);
	border-radius: 10px;
}

html::-webkit-scrollbar-thumb {
	background: rgb(136, 136, 136);
	border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
	background: rgb(100, 100, 100);
	border-radius: 10px;
}

html::-webkit-scrollbar-thumb:active {
	background: rgb(39, 39, 48);
	border-radius: 10px;
}
</style>
